
$(() => {

  // 文章列表搜索

  // 我们的翻页组件需要两个参数
  // 1. 当前页码是多少
  // 2. 一共有多少页
  // 在这里可以开始加载页面数据

  // 翻页组件本身并不管数据的获取, 还是需要 api
  // 获取文章的 api 需要翻页一个要两个参数
  // 1. page 当前页码
  // 2. perpage 每页长度
  let page = 1
  let perpage = 10

  // 设定两个默认的筛选条件
  let type = ''
  let state = ''

  function postInit() {
    // 1 开始发送ajax 请求
    $.ajax({
      type: "get",
      url: bignews.article_query,
      data: {
        page, perpage,
        type,
        state,
      },

      success: function (res) {
        console.log(res);

        serPage(res.data.totalPage, page)
        // 调用模板template 方法  第一个是模板id  第二个是数据
        const result = template('article_list', res.data)
        // 渲染到页面
        $('tbody').html(result)
      }
    });
  }
  postInit()


  // 版本也的使用
  function serPage(totalPages, currentPage) {
    $('.pagination').bootstrapPaginator({
      // 设置版本号
      bootstrapMajorVersion: 3,
      // 设置第几页
      currentPage,
      // 设置总页数
      totalPages,
      onPageClicked(event, originalEvent, type, newPage) {

        console.log('被点击了');
        page = newPage
        postInit()
      }

    })
  }


  // 所有分类
  function articleInit() {
    $.ajax({
      type: "get",
      url: bignews.category_list,
      success: function (res) {
        console.log(res);
        const htmlStr = template('lei', res)
        $('#selCategory').html(htmlStr)
      }
    });
  }
  articleInit()




  // 监听酸选按钮点击事件
  $('#btnSearch').click(() => {
    // console.log(1);
    console.log($('#selStatus').val());
    console.log($('#selCategory').val());
    // 现在有默认的分类和状态保持变量
    // 真的筛选时，就要改变这两个变量
    type = $('#selCategory').val()
    state = $('#selStatus').val()
    // 每次筛选的时候 如果当前页面在页码数据总数范围外，则会报错
    // 每当筛选是，先回复第一页
    page = 1

    // 点击是直接调用ajax请求
    postInit()
  })


  // 删除文章
  // 1 给删除的文章按钮注册委托事件（动态生成的元素需要注册动态事件）
  // 2 获取当前点击自定义属性 data-ID
  // 3 ajax 发送请求
  // 响应之后刷新到页面
  $('table>tbody').on('click', '.delete', function () {
    // console.log(1);
    // 发送ajax 请求s
    $.ajax({
      type: "post",
      url: bignews.article_delete,
      data: {
        // 获取自定义属性 id
        id: $(this).attr('data-id')
      },
      success: function (res) {
        // console.log(res);
        if (res.code == 204) {
          alert('删除成功')
          // 页面实现跳转和刷新
          window.location.reload()
        } else {
          alert(res.msg)
        }
      }
    });
  })



})